
<template>
  <div class="containerWrap">
    <div class="headWrap">
      <div class="content_title">意见调研</div>
      <el-button @click="createOpinion()" type="success" style="float: right">增加调研互动</el-button>
    </div>
    <div >
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="address"
          label="问题内容">
        </el-table-column>
        <el-table-column
          prop="address"
          label="选择类型">
        </el-table-column>
        <el-table-column
          prop="address"
          label="数字显示">
        </el-table-column>
        <el-table-column
          prop="address"
          label="添加时间">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="edit()"  size="small">编辑</el-button>
            <el-button  type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--编辑，增加调研互动弹框-->
      <el-dialog  title="意见调研详情" :visible.sync="opinionVisible" width="30%" >
        <el-form class="demo-form-inline" label-width="100px">
          <el-form-item label="名称">
            <el-input  placeholder="不能多于20个字"></el-input>
          </el-form-item>
          <el-form-item label="问题内容">
            <el-input  placeholder="不能多于40个字"></el-input>
          </el-form-item>
          <el-form-item label="选题类型">
            <el-radio  label="1">单选</el-radio>
            <el-radio  label="2">多选</el-radio>
          </el-form-item>
          <el-form-item label="数值显示">
            <el-radio label="1">百分比</el-radio>
            <el-radio  label="2">人数</el-radio>
          </el-form-item>
          <el-form-item label="是否答题">
            <el-radio  label="1">是</el-radio>
            <el-radio  label="2">否</el-radio>
          </el-form-item>
          <el-form-item label="增加选项">
            <el-button @click="addChoose">增加选项</el-button>
          </el-form-item>
          <el-form-item v-for="(item, index) in choose" :label="'选项' + index"
            :key="index" :prop="'choose.' + index + '.value'">
            <el-input v-model="item.value" placeholder="不能多于18个字" class="chooseInput"></el-input><el-button @click.prevent="removeChoose(index)">删除</el-button>
            <el-checkbox >正确答案</el-checkbox>
          </el-form-item>
          <el-form-item label="发布链接">

          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
           <el-button type="primary">提交保存</el-button>
          <el-button @click="opinionVisible = false">删 除</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>
  export default {
    data () {
      return {
        tableData: [{'id': 1}],
        activeName: '0',
        opinionVisible: false,
        choose: [] // 选项
      };
    },
    methods: {
      // 关键字搜索
      searchByWord () {
        alert('关键字搜索');
      },
      // 增加意见调研
      createOpinion () {
        this.opinionVisible = true;
        alert('增加意见调研');
      },
      // 编辑
      edit () {
        this.opinionVisible = true;
        alert('编辑');
      },
      // 冻结
      freeze () {
        alert('冻结');
      },
      // 删除
//      delete () {
//        alert('删除');
//      },
      // 切换tab页签
      handleClick (tab, event) {
        this.activeName = tab.name;
        alert('切换Tab页签');
      },
      // 增加一个选项
      addChoose () {
        this.choose.push({
          value: '',
          key: Date.now()
        });
      },
      // 删除一个选项
      removeChoose (index) {
        this.choose.splice(index, 1);
      }
    },
    components: {},
    created: function () {
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .chooseInput{
    display: inline-block;
    width: 80%;
  }
  .el-input__inner{
    width: 60%;
  }

</style>
